<template>
  <el-dialog
    class="dialog"
    :visible="_visible"
    :title="$t('bodySnapDetails')"
    :append-to-body="true"
    width="700px"
    :before-close="handleClose"
  >
    <div class="snapDetail-body d-flex jc-center ai-center">
      <div class="snapDetail-image-div">
        <MyImage :src="row.snap_path" />
      </div>
      <div class="snapDetail-list">
        <div class="detail-title">
          <span>{{ $t("baseInfo") }}</span>
        </div>
        <div>
          <span>{{ $t("channelNumber") }}</span>
          <span>{{ row.channel }}</span>
        </div>
        <div>
          <span>{{ $t("channelName") }}</span>
          <span>{{ row.camera_name }}</span>
        </div>
        <div>
          <span>{{ $t("captureDate") }}</span>
          <span>{{ row.trigger }}</span>
        </div>
        <div>
          <div class="detail-title title-last">
            <span>{{ $t("attrInfo") }}</span>
          </div>
          <div v-show="row.body_attr.st_pedestrian_angle">
            <span>{{ $t("bodyCode.st_pedestrian_angle") }}</span>
            <span>
              {{ this.$t(`bodyCode.${row.body_attr.st_pedestrian_angle}`) }}
            </span>
          </div>
          <div v-show="row.body_attr.st_age">
            <span>{{ $t("bodyCode.st_age") }}</span>
            <span>{{ this.$t(`bodyCode.${row.body_attr.st_age}`) }}</span>
          </div>
          <div v-show="row.body_attr.gender_code">
            <span>{{ $t("bodyCode.gender_code") }}</span>
            <span>{{ this.$t(`bodyCode.${row.body_attr.gender_code}`) }}</span>
          </div>
          <div v-show="row.body_attr.st_reflective_clothes">
            <span>{{ $t("bodyCode.st_reflective_clothing") }}</span>
            <span>{{
              this.$t(`bodyCode.${row.body_attr.st_reflective_clothes}`)
            }}</span>
          </div>
          <div v-show="row.body_attr.st_smoking">
            <span>{{ $t("bodyCode.st_smoke") }}</span>
            <span>{{ this.$t(`bodyCode.${row.body_attr.st_smoking}`) }}</span>
          </div>
          <div v-show="row.body_attr.cap_style">
            <span>{{ $t("bodyCode.nb_cap") }}</span>
            <span>{{ this.$t(`bodyCode.${row.body_attr.cap_style}`) }}</span>
          </div>
          <div v-show="row.body_attr.hair_style">
            <span>{{ $t("bodyCode.nb_hair") }}</span>
            <span v-show="row.body_attr.hair_style">
              {{ this.$t(`bodyCode.${row.body_attr.hair_style}`) }}
            </span>
            <span v-show="row.body_attr.hair_style && row.body_attr.hair_color"
              >&nbsp;|&nbsp;</span
            >
            <span v-show="row.body_attr.hair_color">
              {{ this.$t(`bodyCode.${row.body_attr.hair_color}`) }}
            </span>
          </div>
        </div>
        <div v-show="row.body_attr.coat_style">
          <span>{{ $t("bodyCode.nb_coat") }}</span>
          <span v-show="row.body_attr.coat_style">
            {{ this.$t(`bodyCode.${row.body_attr.coat_style}`) }}
          </span>
          <span v-show="row.body_attr.coat_length"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.coat_length}`) }}</span
          >
          <span v-show="row.body_attr.coat_color"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.coat_color}`) }}</span
          >
          <span v-show="row.body_attr.st_coat_pattern"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.st_coat_pattern}`) }}</span
          >
        </div>
        <div v-show="row.body_attr.trousers_len">
          <span>{{ $t("bodyCode.nb_trousers") }}</span>
          <span v-show="row.body_attr.trousers_len">
            {{ this.$t(`bodyCode.${row.body_attr.trousers_len}`) }}
          </span>
          <span v-show="row.body_attr.trousers_color"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.trousers_color}`) }}</span
          >
          <span v-show="row.body_attr.st_trousers_pattern">
            &nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.st_trousers_pattern}`) }}
          </span>
        </div>
        <div v-show="row.body_attr.shoes_style">
          <span>{{ $t("bodyCode.nb_shoes") }}</span>
          <span v-show="row.body_attr.shoes_style">
            {{ this.$t(`bodyCode.${row.body_attr.shoes_style}`) }}
          </span>
          <span v-show="row.body_attr.shoes_color"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.shoes_color}`) }}</span
          >
        </div>
        <div v-show="row.body_attr.st_umbrella">
          <span>{{ $t("bodyCode.nb_umbrella") }}</span>
          <span v-show="row.body_attr.st_umbrella">
            {{ this.$t(`bodyCode.${row.body_attr.st_umbrella}`) }}
          </span>
          <span v-show="row.body_attr.umbrella_color"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.umbrella_color}`) }}</span
          >
        </div>
        <div v-show="row.body_attr.bag_style">
          <span>{{ $t("bodyCode.nb_bag") }}</span>
          <span v-show="row.body_attr.bag_style">
            {{ this.$t(`bodyCode.${row.body_attr.bag_style}`) }}
          </span>
          <span v-show="row.body_attr.bag_color"
            >&nbsp;|&nbsp;
            {{ this.$t(`bodyCode.${row.body_attr.bag_color}`) }}</span
          >
        </div>
        <div v-show="row.body_attr.st_glove">
          <span>{{ $t("bodyCode.st_glove") }}</span>
          <span v-show="row.body_attr.st_glove">
            {{ this.$t(`bodyCode.${row.body_attr.st_glove}`) }}
          </span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import MyImage from "@/components/Image.vue";
export default {
  components: {
    MyImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    handleClose(done) {
      this._visible = false;
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  .snapDetail-body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .snapDetail-image-div {
    width: 220px;
    height: 250px;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .snapDetail-list {
    text-align: left;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #d8d8e0;
    line-height: 24px;
    width: 340px;
    font-family: "Noto Sans CJK SC";
    font-size: 13px;
    div {
      width: 100%;
    }
    .title-last {
      margin-top: 10px;
    }
    .detail-title,
    & > div > .detail-title {
      font-size: 14px;
      color: #000;
      font-weight: bold;
      margin-bottom: 10px;
      border-bottom: 1px solid #d8d8e0;
      > span:nth-child(1) {
        background: #8e8e92;
        padding: 5px 10px;
        width: auto;
        display: initial;
      }
    }
    > div span:nth-child(1),
    .snapDetail .snapDetail-list > div > div span:nth-child(1) {
      width: 120px;
      color: #333;
      display: inline-block;
      font-weight: bold;
    }
  }
}
</style>
